<template>
  <div class="box">
    <header class="header">
      <i class="van-icon van-icon-arrow-left leftArrow" @click="$router.go(-1)"></i>
    </header>
    <div class="content">
      <div class="store_avatar">
        <img src="https://m.flyco.com/aliyun/images/home/Logo.png" alt="飞科商城">
      </div>
      <van-form @submit="onSubmit">
        <van-field
          v-model="tel"
          name="手机号"
          placeholder="请填写手机号"
          :rules="[{ required: true, pattern: telPattern, message: '请填写正确的手机号'}]"
          clearable
        >
          <van-icon name="phone" slot="label" size="22px"/>
        </van-field>
        <van-field
          v-model="password"
          type="password"
          name="密码"
          placeholder="请填写密码"
          :rules="[{ required: true, pattern: psdPattern, message: '密码长度不少于6位' }]"
          clearable
        >
         <van-icon name="closed-eye" slot="label" size="22px" />
        </van-field>
        <div>
          <van-button round block type="info" native-type="submit">
            登录
          </van-button>
        </div>
      </van-form>
      <div class="agreement">
        <p>登录即表明同意<span>《飞科商城用户服务协议》</span></p>
      </div>
      <div class="toRegister">
        <p>没有账号？ 前往 <router-link to="/register" tag='span'>注册</router-link></p>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { NavBar, Form, Field, Button, Icon, Toast } from 'vant'
// import { login } from '@/api'
import { mapActions } from 'vuex'

Vue.use(NavBar)
Vue.use(Form)
Vue.use(Field)
Vue.use(Button)
Vue.use(Icon)
Vue.use(Toast)

export default {
  data () {
    return {
      tel: '', // 手机号
      password: '', // 密码
      telPattern: /^1[3456789]\d{9}$/, // 手机正则
      psdPattern: /\d{6}/ // 密码正则
    }
  },
  methods: {
    // mapActions 辅助函数 引入users模块action中login
    ...mapActions('users', ['login']),
    onSubmit (values) {
      this.login({
        tel: this.tel,
        password: this.password
      }).then((data) => {
        // 登录状态码
        const code = this.$store.state.users.login_code
        if (code === '600') {
          Toast.fail('手机号或密码为空，请完善表单信息')
        } else if (code === '602') {
          Toast.fail('该用户未注册')
        } else if (code === '603') {
          Toast.fail('密码错误')
        } else if (code === '200') {
          this.$router.replace('/myuser')
          // 本地存储信息
          localStorage.setItem('userid', data.userid)
          localStorage.setItem('token', data.token)
          localStorage.setItem('nickname', data.nickname)
          localStorage.setItem('sex', data.sex)
          localStorage.setItem('date', data.date)
          localStorage.setItem('avatar', data.avatar)
          localStorage.setItem('loginState', 'ok')
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped >
.box {
  width: 100%;
  height: 100%;
  background: url('https://m.flyco.com/aliyun/images/home/loginBg.png');
  .leftArrow {
    margin-left: .1rem;
    margin-top: .1rem;
    z-index: 999;
    font-size: .15rem;
    font-weight: 700;
    width: .3rem;
    height: .3rem;
    color: #fff;
    background: #000;
    line-height: .3rem;
    opacity: .3;
    text-align: center;
    border-radius: 50%;
  }
  .store_avatar {
    width: 100%;
    height: 0.43rem;
    margin-top: 0.93rem;
    text-align: center;
    margin-bottom: .7rem;
    img{
      width: 1.27rem;
    }
  }
  .van-button {
    width: 3.15rem;
    line-height: 0.39rem;
    text-align: center;
    font-size: .16rem;
    letter-spacing: .03rem;
    height: 0.39rem;
    background-image: linear-gradient(180deg,#57e0f9,#43b8fb),linear-gradient(#009ce5,#009ce5);
    background-blend-mode: normal,normal;
    border-radius: .19rem;
    color: #fff;
    margin: 0 auto;
    border: none;
  }
  .van-field {
    background: transparent;
    width: 3.15rem;
    border-radius: .19rem;
    border: 1px solid #fff;
    line-height: .4rem;
    padding: 0;
    height: .4rem;
    font-size: .14rem;
    margin: .15rem auto;
    color: #fff;
    .van-cell__value {
      color: #fff;
    }
    /deep/ .van-field__error-message {
      position: absolute;
      top: 0;
      right: 20px;
      color: #ee0a24;
      letter-spacing: .2px;
      font-size: 14px;
    }
  }
  /deep/ .van-field__control {
    color: #fff
  }
  /deep/ input.van-field__control {
    &::-webkit-input-placeholder {
       color: #fff;
    }
    &::-moz-placeholder {
    color: #fff;
    }
    &:-moz-placeholder {
      color: #fff;
    }
    &:-ms-input-placeholder {
    color: #fff;
    }
  }
  /deep/ .van-field__label{
    width: .5rem;
    line-height: .4rem;
    text-align: center;
    .van-icon {
      margin: 8px;
      padding-right: 8px;
      border-right: 1px solid #fff;
    }
  }
  .agreement {
    text-align: center;
    margin-top: .1rem;
    margin-bottom: .32rem;
    color: #fff;
    font-size: 12px;
    span{
      font-size: .1rem;
      color: #cbd0a4;
    }
  }
  .toRegister {
    text-align: center;
    margin-top: .1rem;
    margin-bottom: .32rem;
    color: #fff;
    font-size: 12px;
    span{
      display: inline-block;
      color:  greenyellow;
    }
  }
}
</style>
